﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base th:href="${url}">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>

    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 创建用户的模态窗口 -->
<div class="modal fade" id="createUserModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 90%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="create-loginActNo" class="col-sm-2 control-label">登录帐号<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-loginActNo">
                        </div>
                        <label for="create-username" class="col-sm-2 control-label">用户姓名</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-username">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-loginPwd" class="col-sm-2 control-label">登录密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="password" class="form-control" id="create-loginPwd">
                        </div>
                        <label for="create-confirmPwd" class="col-sm-2 control-label">确认密码<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="password" class="form-control" id="create-confirmPwd">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-email">
                        </div>
                        <label for="create-expireTime" class="col-sm-2 control-label">失效时间</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-expireTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-lockStatus" class="col-sm-2 control-label">锁定状态</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create-lockStatus">
                                <option></option>
                                <option>启用</option>
                                <option>锁定</option>
                            </select>
                        </div>
                        <label for="create-org" class="col-sm-2 control-label">部门<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-org" placeholder="输入部门名称，自动补全">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-allowIps" class="col-sm-2 control-label">允许访问的IP</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-allowIps" style="width: 280%"
                                   placeholder="多个用逗号隔开">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>


<div>
    <div style="position: relative; left: 30px; top: -10px;">
        <div class="page-header">
            <h3>用户列表</h3>
        </div>
    </div>
</div>

<div class="btn-toolbar" role="toolbar" style="position: relative; height: 80px; left: 30px; top: -10px;">
    <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">用户姓名</div>
                <input class="form-control" type="text">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">部门名称</div>
                <input class="form-control" type="text">
            </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">锁定状态</div>
                <select class="form-control">
                    <option></option>
                    <option>锁定</option>
                    <option>启用</option>
                </select>
            </div>
        </div>
        <br><br>

        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">失效时间</div>
                <input class="form-control" type="text" id="startTime"/>
            </div>
        </div>

        ~

        <div class="form-group">
            <div class="input-group">
                <input class="form-control" type="text" id="endTime"/>
            </div>
        </div>

        <button type="submit" class="btn btn-default">查询</button>

    </form>
</div>


<div class="btn-toolbar" role="toolbar"
     style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px; width: 110%; top: 20px;">
    <div class="btn-group" style="position: relative; top: 18%;">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createUserModal"><span
                class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
    </div>
    <div class="btn-group" style="position: relative; top: 18%; left: 5px;">
        <button type="button" class="btn btn-default">设置显示字段</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul id="definedColumns" class="dropdown-menu" role="menu">
            <li><a href="javascript:void(0);"><input type="checkbox"/> 登录帐号</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 用户姓名</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 部门名称</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 邮箱</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 失效时间</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 允许访问IP</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 锁定状态</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 创建者</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 创建时间</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 修改者</a></li>
            <li><a href="javascript:void(0);"><input type="checkbox"/> 修改时间</a></li>
        </ul>
    </div>
</div>

<div style="position: relative; left: 30px; top: 40px; width: 110%">
    <table class="table table-hover">
        <thead>
        <tr style="color: #B3B3B3;">
            <td><input type="checkbox"/></td>
            <td>序号</td>
            <td>登录帐号</td>
            <td>用户姓名</td>
            <td>部门名称</td>
            <td>邮箱</td>
            <td>失效时间</td>
            <td>允许访问IP</td>
            <td>锁定状态</td>
            <td>创建者</td>
            <td>创建时间</td>
            <td>修改者</td>
            <td>修改时间</td>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td><input type="checkbox"/></td>
            <td>1</td>
            <td><a href="detail.html">zhangsan</a></td>
            <td>张三</td>
            <td>市场部</td>
            <td>zhangsan@bjpowernode.com</td>
            <td>2017-02-14 10:10:10</td>
            <td>127.0.0.1,192.168.100.2</td>
            <td><a href="javascript:void(0);" onclick="window.confirm('您确定要锁定该用户吗？');"
                   style="text-decoration: none;">启用</a></td>
            <td>admin</td>
            <td>2017-02-10 10:10:10</td>
            <td>admin</td>
            <td>2017-02-10 20:10:10</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2</td>
            <td><a href="detail.html">lisi</a></td>
            <td>李四</td>
            <td>市场部</td>
            <td>lisi@bjpowernode.com</td>
            <td>2017-02-14 10:10:10</td>
            <td>127.0.0.1,192.168.100.2</td>
            <td><a href="javascript:void(0);" onclick="window.confirm('您确定要启用该用户吗？');"
                   style="text-decoration: none;">锁定</a></td>
            <td>admin</td>
            <td>2017-02-10 10:10:10</td>
            <td>admin</td>
            <td>2017-02-10 20:10:10</td>
        </tr>
        </tbody>
    </table>
</div>

<div style="height: 50px; position: relative;top: 30px; left: 30px;">
    <div>
        <button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
    </div>
    <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
        <button type="button" class="btn btn-default" style="cursor: default;">显示</button>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                10
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">20</a></li>
                <li><a href="#">30</a></li>
            </ul>
        </div>
        <button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
    </div>
    <div style="position: relative;top: -88px; left: 285px;">
        <nav>
            <ul class="pagination">
                <li class="disabled"><a href="#">首页</a></li>
                <li class="disabled"><a href="#">上一页</a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">下一页</a></li>
                <li class="disabled"><a href="#">末页</a></li>
            </ul>
        </nav>
    </div>
</div>

</body>
</html>